{% if each_input.device == 'input_spacer' %}
  {% include 'pages/data_options/input_spacer.html' %}
{% else %}

<form method="post" action="/input">
  {{form_mod_input.csrf_token}}
  {{form_mod_input.input_id(value=each_input.unique_id)}}

  {% set form = form_mod_input %}
  {% set dict_options = dict_inputs[each_input.device] %}
  {% set each_device = each_input %}
  {% set unique_id = each_input.unique_id %}
  {% set custom_options_values = custom_options_values_inputs %}

  <div id="input_status_{{each_input.unique_id}}" class="grid-stack-item-content {% if each_input.is_activated -%}active-background{% else -%}inactive-background{% endif %} row small-gutters" style="padding: 4px; border: 1px solid #ddd; border-radius: 5px">
    <div class="col-1 text-center icon-fh my-auto panel-heading">
      <i style="font-size: 2em" class="fa fa-grip-horizontal" title="{{_('Drag')}}"></i>
    </div>
    <div class="col-1 text-center icon-fh my-auto">
      <a class="btn" style="border-color: transparent; padding: 0" data-toggle="modal" data-target="#modal_config_{{each_input.unique_id}}">
        <i style="font-size: 1.5em" class="fas fa-cog" title="{{_('Configure')}}"></i>
      </a>
    </div>
    <div class="col-3">
      <input id="input_name_{{each_input.unique_id}}" class="form-control" disabled="" value="{{each_input.name}}" type="text">
    </div>
    <div class="col-4">
      <input class="form-control btn btn-primary btn-block" type="button" onclick="setClipboard('{{each_input.unique_id}}')" title="UUID: {{each_input.unique_id}}, {{dict_translation['copy_to_clipboard']['phrase']}}" value="
  {%- if each_input.device in dict_inputs -%}
    {%- if 'input_name_short' in dict_inputs[each_input.device] -%}
      {{dict_inputs[each_input.device]['input_name_short']}}
    {%- else -%}
      {{dict_inputs[each_input.device]['input_name']}}
    {%- endif -%}
  {%- endif -%}
    ">
    </div>
    <div class="col-3">
      <input {% if each_input.is_activated -%}style="display: none"{% endif %} onclick="return $(this).processRequest(this, 'input_activate');" name="input_activate" id="input_activate_{{each_input.unique_id}}" class="form-control btn btn-primary" type="button" value="{{_('Activate')}}"/>
      <input {% if not each_input.is_activated -%}style="display: none"{% endif %} onclick="return $(this).processRequest(this, 'input_deactivate');" name="input_deactivate" id="input_deactivate_{{each_input.unique_id}}" class="form-control btn btn-primary" type="button" value="{{_('Deactivate')}}"/>
    </div>
  </div> <!-- grid-stack-item-content -->

</form>

<div class="modal fade" id="modal_config_{{each_input.unique_id}}" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content" style="padding: 1em">
      <div class="modal-header">
        <h5 class="modal-title">Input Configuration{% if each_input.device in dict_inputs %}: {{dict_inputs[each_input.device]['input_name']}}{% endif %}</h5>
      </div>
      {% include 'pages/data_options/input_options.html' %}
    </div>
  </div>
</div>

{% endif %}
